<template>
  <div id="app">
    <el-container :style="conStyle">
      <el-aside width="200px">
        <div class="userLogin">
          <div class="logo">
          </div>
          <my-nav></my-nav>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div class="my-header">
            <div class="userwrap">
              <!--              TODO:需要登陆后从vuex里面获取信息-->
              <span id="login-user-name">{{$store.state.indexStore.username}}</span>欢迎您
            </div>
            <div id="time-now">
              <div class="time-wrap" v-text="time" v-loading="loading"></div>
            </div>
            <div id="home-operate">
              <div id="home-notice" @click="showNotice">公告</div>
              <div id="change-my-info" @click="goChangeMyInfo">修改个人信息</div>
              <div id="out-login" @click="loginOut">退出登录</div>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import MyNav from '../components/Nav'
  import {mapState} from 'vuex'
  export default {
    name: 'App',
    components: {
      'my-nav': MyNav
    },
    data(){
      return {
        conStyle: {
          height: ''
        },
        loginUserName: '',
        time: '',
      }
    },
    computed: {
      ...mapState([
        'username'
      ]),
      loading() {
        return !!this.time
      }
    },
    created() {
      setInterval(() =>{
        this.time = new Date().toLocaleString()
      },1000)
      //  样式设置
      this.conStyle.height = window.innerHeight+'px'
    },
    methods: {
      showNotice(){
          const h = this.$createElement;
          this.$message({
            message: h('p', null, [
              h('span', null, '今日公告 '),
              h('i', { style: 'color: teal' }, '暂无公告')
            ])
          })
      },
      goChangeMyInfo(){
        this.$router.push('/changeMyInfo')
      },
      loginOut() {
        // se.log('退出登录')
        // 退出登录: 清空 本地和vuex里面的所有信息呢 并且返回 login 页面
        sessionStorage.removeItem('token')
        sessionStorage.removeItem('username')
        sessionStorage.removeItem('imgsrc')
        sessionStorage.removeItem('level')
        this.$store.state.indexStore={}
        this.$router.push('/login')
      }
    }
  }
</script>

<style>
  * {
    padding: 0;
    margin: 0;
  }
</style>

<style lang="less" scoped>
  #app {
    .el-container {
      /* 左边导航 */
      .el-aside {
        color: #333;
        text-align: center;
      }
      /* 右边头部和主体部分*/
      .el-container {
        /* 上边头部 */
        .el-header {
          text-align: center;
          .my-header {
            height: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: space-between;
            
            #time-now {
              .time-wrap {
                background-color: rgba(255, 255, 255, 0.18);
                padding: 8px 20px;
                border-radius: 10px;
                border: 1px solid white;
              }
            }
            #home-operate {
              flex: 0 0 300px;
              display: flex;
              flex-direction: row;
              flex-wrap: nowrap;
              justify-content: space-between;
              #home-notice,
              #out-login,
              #change-my-info {
                cursor: pointer;
              }
            }
          }
        }
        /* 主体内容 */
        .el-main {
          border-top: 20px solid white;
          border-left: 20px solid white;
        }
      }
    }
  }

</style>

